<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style-type: none;
    }

    a {
      text-decoration: none;
      font-size: 14px;
    }

    .nav {
      margin: 100px;
    }

    .nav>li {
      position: relative;
      float: left;
      width: 80px;
      height: 41px;
      text-align: center;
    }

    .nav li a {
      display: block;
      width: 100%;
      height: 100%;
      line-height: 41px;
      color: #333;
    }

    .nav>li>a:hover {
      background-color: #eee;
    }

    .nav ul {
      display: none;
      position: absolute;
      top: 41px;
      left: 0;
      width: 100%;
      border-left: 1px solid #fecc5b;
      border-right: 1px solid #fecc5b;
    }

    .nav ul li {
      border-bottom: 1px solid #fecc5b;
    }

    .nav ul li a:hover {
      background-color: #fff5da;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
  <ul class="nav">
    <li>
      <a href="#">微博1</a>
      <ul>
        <li><a href="">私信1</a></li>
        <li><a href="">评论1</a></li>
        <li><a href="">@我1</a></li>
      </ul>
    </li>
    <li>
      <a href="#">微博2</a>
      <ul>
        <li><a href="">私信2</a></li>
        <li><a href="">评论2</a></li>
        <li><a href="">@我2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">微博3</a>
      <ul>
        <li><a href="">私信3</a></li>
        <li><a href="">评论3</a></li>
        <li><a href="">@我3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">微博4</a>
      <ul>
        <li><a href="">私信4</a></li>
        <li><a href="">评论4</a></li>
        <li><a href="">@我4</a></li>
      </ul>
    </li>
  </ul>
  <script>
    /* 
         需求:
             1. 鼠标接触 li,则显示 ul
             2. 鼠标离开 li,则隐藏 ul
         $(this)  转化为 jQuery 的对象
         jQuery 绑定事件
         show() 显示   
     */
    $(function () {
      // 类选择器
      $('.nav')
        // 子选择器(亲儿子)
        .children('li')
        // 事件绑定
        .mouseenter(function () {
          // console.log(this);
          // 转化为 jQuery 对象
          $(this)
            // 子选择器
            .children('ul')
            // 显示元素
            .show();
        });

      // 鼠标离开 li，隐藏 ul
      $('.nav').children('li').mouseleave(function () {
        $(this).children('ul').hide();
      });
    });
  </script>
</body>

</html>